<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>top</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1322370_z4j00x6f8yi.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="js/index.js"></script>
</head>
<body>
    <!-- 首页 -->
    <div class="top" id="top">
        <div class="top-left">
            <p><a href="#">个</a></p>
            <p><a href="#">人</a></p>
            <p><a href="#">网</a></p>
            <p><a href="#">站</a></p>
        </div>
        <div class="top-center">
            <!-- <span class="line"></span> -->
        </div>
        <div class="top-right">
            <p><a href="#">首页</a></p>
            <p><a href="#about">关于我</a></p>
            <p><a href="#nav">无锡之行</a></p>
            <p><a href="#work">我的学习</a></p>
            <p><a href="#study">我的作品</a></p>
            <p><a href="#contact">联系我</a></p>
        </div>
    </div>
    <!-- 关于自己 -->
    <div id="about" class="about">
        <div class="about-top">
            <h1>关于我</h1>
            <span>I AM WANGSIMAN</span>
        </div>
        <img src="images/about3.jpg" alt="">
        <div class="about-center">
            <p><span>我叫王思嫚，</span>一名大三本科在读学生，即将踏入社会，对未来充满了期待。在极客营一个月的学习，让我对自己的专业有了明确的认识，也对未来作出了基本的规划。</p>
            <ul>
                <li><span>姓名:</span> 王思嫚</li>
                <li><span>年龄:</span> 21岁</li>
                <li><span>爱好:</span> 听电台、旅游</li>
                <li><span>邮箱:</span> <a href="mailto:info@example.com">1713411498@qq.com</a></li>
                <li><span>电话:</span> 15871794149</li>
                <li><span>微博:</span> <a href="#">M.man</a></li>
                <li><span>地址:</span> 湖北大学知行学院</li>
                <li><a href="#">返回首页</a>
					<a href="#nav">继续欣赏</a>
				</li>
            </ul>
            
       </div>
    </div>
    <!-- 无锡之行轮播 -->
    <div class="nav" id="nav">
        <div class="nav-top">
          <h1>@无锡之行</h1>
          <p>生活就是风景</p>
        </div>
        <div class="nav-left">
            <div class="tp">
                <div class="xj">
                    <i class="location iconfont">&#xe734;</i>
               </div>
            </div>    
            <div class="xx">
                <h3>第一站</h3>
                <span>惠山古镇->无锡博物馆->南禅寺</span>
                <h3>第二站</h3>
                <span>软件园体育馆</span>
                <h3>第三站</h3>
                <span>十八弯真人CS烧烤拓展露营地</span>
            </div>
        </div>
        <div class="nav-right">
            <div class="content">
                <img src="images/02.png" alt="">
                <img src="images/01.png" alt="">
                <img src="images/03.png" alt="">
                <img src="images/04.png" alt="">
                <img src="images/05.png" alt="">
            </div>
            <button class="prev position-center-y"></button>
            <button class="next position-center-y"></button>
            <div class="all-icons">
                <span class="active"></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </div>
    <!-- 我的学习 -->
    <div class="work" id="work">
        <div class="work-top">
            <h1>我的学习</h1>
            <h5>学习笔记</h5>
        </div>
        <h4>未来可期</h4>
        <h2>我们<span>一起</span> 努力</h2>
        <div class="bj">
            <div class="bj1">
                <p>码云存储</p>
                <span>在极客营一个月学习的笔记、作业。</span>
                <p><img src="images/bj1.jpg" alt=""></p>
                <a href="https://gitee.com/wangsiman/notebook">我的码云仓库</a>
            </div>
            <div class="bj2">
                <p>语雀笔记</p>
                <span>我的前端学习每日笔记。</span>
                <p><img src="images/bj2.jpg" alt=""></p>
                <a href="https://www.yuque.com/dashboard">我的语雀笔记</a>
            </div>
        </div>
        </div>
    <!-- 知识技能  -->
    <div class="skills">
        <h1>知识技能</h1>
        <h5>我的学习经历</h5>
        <div class="skills-left">
            <h3>专业技能</h3>
            <div class="progress">
            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                <p>html</p>
                <span class="sr-only">80% Complete (success)</span>
            </div>
            </div>
            <div class="progress">
            <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%">
                <p>css</p>
                <span class="sr-only">70% Complete</span>
            </div>
            </div>
            <div class="progress">
            <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="width: 65%">
                <p>javascript</p>
                <span class="sr-only">65% Complete (warning)</span>
            </div>
            </div>
            <div class="progress">
            <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                <p>photoshop</p>
                <span class="sr-only">80% Complete (danger)</span>
            </div>
            </div>
        </div>
        <div class="skills-right">
                 <h3>必修技能</h3>
                <div class="progress">
                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                    <p>社交能力</p>
                    <span class="sr-only">80% Complete (success)</span>
                </div>
                </div>
                <div class="progress">
                <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 85%">
                    <p>表现能力</p>
                    <span class="sr-only">85% Complete</span>
                </div>
                </div>
                <div class="progress">
                <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%">
                    <p>领导能力</p>
                    <span class="sr-only">70% Complete (warning)</span>
                </div>
                </div>
                <div class="progress">
                <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                    <p>组织能力</p>
                    <span class="sr-only">80% Complete (danger)</span>
                </div>
                </div>
            </div>
    </div>
    <!-- 我的作品 -->
    <div class="study" id="study">
      <div class="study-top">
            <h1>我的作品</h1>
            <p>前端学习</p>
        </div>
      <div class="study-zp">
          <div class="zp-top">
           <div class="study-zp1">
              <a href="day01/index1.html">
                <img src="images/zy1.jpg" alt="">
              </a>
           </div>
           <div class="study-zp2">
              <a href="day02/index2.html">
                <img src="images/zy2.jpg" alt="">
              </a>
            </div>
            <div class="stydy-zp3">
                <a href="day03-3/index.html">
                    <img src="images/zy3.jpg" alt="">
                </a>
            </div>
        </div>
        <div class="zp-bottom">
            <div class="study-zp4">
                <a href="day10-2/index.html">
                    <img src="images/zy4.jpg" alt="">
                </a>
            </div>
            <div class="study-zp5">
                 <a href="day11/index.html">
                    <img src="images/zy5.jpg" alt="">
                </a>
            </div>
            <div class="study-zp6">
                 <a href="day13/index.html">
                    <img src="images/zy6.jpg" alt="">
                </a>
            </div>

        </div>


      </div>
    </div>
    <!-- 联系我 -->
    <div class="contact" id="contact">
        <h1>联系我</h1>
        <h5>请在下方留言</h5>
        <div class="massage">
            <form action="#" method="post">
                <input type="text" name="Your Name" placeholder="姓名" required="">
                <input type="email" name="Your Email" placeholder="电子邮箱" required="">
                <input type="text" name="Phone Number" placeholder="联系方式" required="">
                <textarea name="Message" placeholder="留言板" required=""></textarea>
                <input type="submit" value="提交">
            </form>
        </div>
        <div class="contact-bottom">
          <div class="menu-left">
             <h3>社交信息</h3>
             <hr class="line">
             <ul>
                 <li><img src="images/qq.jpg" alt=""></li>
                 <li><img src="images/wx.jpg" alt=""></li>
             </ul>
          </div>
          <div class="menu-center">
             <h3>具体信息</h3>
             <hr class="line">
             <ul>
                 <li><i class="location iconfont">&#xe65b;</i>158-7179-4149</li>
                 <li><i class="location iconfont">&#xe65f;</i>湖大知行</li>
             </ul>
          </div>
          <div class="menu-right">
              <h3>我的地址</h3>
              <hr class="line">
              <ul>
                  <li>湖北省武汉市江岸区湖大知行</li>
                  <li>@http://gaode.app</li>
                  <li>5小时</li>
              </ul>
          </div>
        </div>
    </div>
    <div class="foot bq">
       <p>版权所有者：王思嫚</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>